<template>
    <div class="itemMusicList">
        <!-- 组件顶部 -->
        <div class="itemMusicListTop">
            <!-- 顶部左边 -->
            <div class="itemMusicListTopLeft">
                <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                    <use xlink:href="#icon-bofang"></use>
                </svg>       
                <p>播放全部</p>
                <span>(共{{ itemList.length }}首)</span>
            </div>
            <!-- 顶部右边 -->
            <div class="itemMusicListTopRight">
                <div class="gx">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiahao1"></use>
                    </svg>       
                    <span>收藏</span>
                    <p>({{ trackCount }})</p>
                </div>
                
            </div>
            
        </div>

        <!-- 歌曲信息 -->
        <div class="itemMusicListContent" v-for="(itemMusicListContent,i) in  itemList" :key="i">
            <div class="itemMusicListContentLeft" @click = "playMusic(i)">
                <span>{{ i+1 }}</span>
                <div class="name">
                    <p>{{ itemMusicListContent.name }}</p>
                    <span class="author" v-for="(author,name) in itemMusicListContent.ar" :key="name">{{ author.name }}</span>
                </div>
            </div>

            <div class="itemMusicListContentRight">

                <svg class="icon" aria-hidden="true" v-if="itemMusicListContent.mv !=0">
                    <use xlink:href="#icon-MV"></use>
                </svg> 
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sandian"></use>
                    </svg>  
                </span>
            </div>
        </div>
    </div>
    

</template>

<script>
import { mapMutations } from 'vuex';

export default {
    setup(props) {
        console.log(props)
    },
    props: ['itemList', 'trackCount'],
    methods: {
        playMusic: function (i) {
            this.updatePlayList(this.itemList)  
            this.updatePlayListIndex (i)
        },
        ...mapMutations(['updatePlayList','updatePlayListIndex'])
    }

}




</script>

<style lang="less" scoped>
.itemMusicList{
    width: 100%;
    border-top-left-radius: 6vw;
    border-top-right-radius: 6vw;
    background-color: #fff;
    margin-top: 1vh;
    height: 40vh;

    // 顶部
    .itemMusicListTop{
        width: 100%;
        display: flex;
        // margin-left: 2vw;
        // margin-right: 2vw;
        margin-top: 1vh;
        justify-content: space-between;
        align-items: center;

        // 顶部左边
        .itemMusicListTopLeft{
            width: 45%;
            display: flex;
            align-items: center;
            .icon{
                margin-left: 2vw;
                width: 8vw;
                height: 8vw;
            }
            p{
                font-size: 4.5vw;
                font-weight: bold;
                color: #000;
                margin-left: 2vw;
            }
            span{
                font-size: 3.5vw;
                // margin-top: 0.4vh;
                color: #787474;
            }
        }
    

        // 顶部右边
        .itemMusicListTopRight{

        margin-right: 2.5vw;
        .gx{
            display: flex;
            align-items: center;
            background-color:red;
            border-radius: 5vw;
            margin-top: 1vh;
            // width: 42vw;
            padding: 2vw;

            .icon{
                width: 5vw;
                height: 4vw;
                margin-right: 1vw;
                fill: #fff;
            }
            span{
                font-size: 4vw;
                // font-weight: bold;
                color: #fff;
            }
            p{
                color: #fff;
                font-size: 4vw;
                margin-top: 0.5vh;
            }
        }

        }
    }
    //歌曲信息
    .itemMusicListContent{
        display: flex;
        margin-top: 1vh;
        justify-content: space-between;
        height: 5vh;

        // 歌单详细信息左边
        .itemMusicListContentLeft{
            display: flex;
            align-items: center;
            // border: 1px solid gray;

            > span{
                font-size: 5vw;
                font-weight: bold;
                margin-left: 4vw;
                width: 6vw;
                text-align: center;
            }

            .name{
                margin-left: 3vw;

                p{
                    font-size: 4vw;
                    font-weight: bold;
                }
                span{
                    padding-right: 3vw;
                    color: #787474;
                    font-size: 3vw;
                }

            }
            

        }

        //歌单详细信息右边
        .itemMusicListContentRight{
            display: flex;
            align-items: center;
            
            > .icon{
                width: 12vw;
                height: 12vw;
                margin-right: 6vw;
            }
            
            span{
                margin-right: 3vw;
                .icon{
                    width: 4vw;
                    height: 4vw;
                }
            }
        }
    }
}

</style>